<template>
	<view class="title" v-if="shenheStatus == 0">
		<view class="content">
			<view class="felx">
				<u-image width="100rpx" height="100rpx" :src="obj.logo" border-radius="10rpx"></u-image>
				<view class="right">
					<view class="name">
						{{obj.name}}
					</view>
					<view class="status">
						<text>{{obj.is_open==1?'营业中':'打烊中'}}</text>
					</view>
				</view>
			</view>
			<view class="address">
				{{obj.address}}
			</view>
		</view>
		<view class="page">
			<view class="pageLeft">
				<scroll-view scroll-y class="scroll">
					<view :class="['item', item.id === cat_id ? 'active' : '']" v-for="(item, i) of cat_list"
						:key="item.id" @click="clear(item.id)">
						<view class="line"></view>
						{{ item.name }}
					</view>
				</scroll-view>
			</view>

			<view class="pageRight">
				<scroll-view scroll-y class="scroll" @scrolltolower="scrolltolower">
					<view class="list" >
						<view class="item" v-for="(item, i) of goods_list" :key="i" @click="toGoods(item.id)">
							<view class="img">
								<image mode="aspectFill" :src="item.pic_url" lazy-load></image>
							</view>

							<view class="con">
								<view class="name"> {{ item.name }} </view>
								<view class="des">{{item.desc && item.desc.length ? item.desc.join(" · ") : "" }}</view>
								<!-- <view class="miao">
									限时秒杀
								</view> -->
								<view class="" style="font-weight: 400;
					font-size: 24rpx;
					color: #9B9B9B;">
									已售 {{item.sales}}
								</view>
								<view class="conFd">
									<view class="let">
										<view class="flex">
											<view class="price">
												<view class="s1">{{ getPrice(item.price)[0] }}</view>
												<view>.{{ getPrice(item.price)[1] }}</view>
											</view>

											<view class="oldPrice">¥{{ item.original_price }}</view>
											<view class="wd">
												<view class="iconBg" v-if="item.product_type!=1" @click.stop="toAddcart(item)">
													<u-icon name="plus" color="#FFF"></u-icon>
													<view class="num" v-if="item.catNum!=0">
														{{item.catNum}}
													</view>
												</view>
												<view class="nextGo" v-else>
													立即预订
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<toolsMore :status="moreStatus"></toolsMore>
				</scroll-view>
			</view>
		</view>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from "@/components/shenhe/shenhe";
	import {
		goodsCateList,
		goodsList
	} from "@/api/marketing/callOut";
	import toolsMore from "@/components/tools/tools-more.vue";

	export default {
		props: {
			obj: {
				type: Object,
			},
			dis: {
				type: String,
			},
			mch_id: {
				type: Number,
			},
			cat_List1:{
				type: Array,
			}
		},
		components: {
			Shenhe,
			toolsMore,
		},

		computed: {
			getPrice() {
				return (price) => {
					if (!price) return ["0", "00"];
					return price.split(".");
				};
			},
		},

		data() {
			return {
				list: [],
				cat_list: [],
				cat_id: undefined,
				pageNo: 1,
				pageSize: 10,
				isEnd: false,
				goods_list: [],
				moreStatus: 1,
			};
		},

		created() {
			this.getCatList();
		},
		watch: {
			goods_list: {
				handler(newVal, oldVal) {
					let map = new Map();
					this.cat_List1.forEach(item => {
						if (map.has(item.goods_id)) {
							map.set(item.goods_id, map.get(item.goods_id) + item.num);
						} else {
							map.set(item.goods_id, item.num);
						}
					});

					// 遍历 goods_list 并更新 catNum
					this.goods_list.forEach(item => {
						// 将 id 转换为数字进行匹配
						const idAsNumber = Number(item.id);
						if (map.has(idAsNumber)) {
							item.catNum = map.get(idAsNumber);
						} else {
							item.catNum = 0; // 如果没有匹配的 goods_id，确保 catNum 为 0
						}
					});
				},
				deep: true
			},
			cat_List1: {
				handler(newVal, oldVal) {
					let map = new Map();
					this.cat_List1.forEach(item => {
						if (map.has(item.goods_id)) {
							map.set(item.goods_id, map.get(item.goods_id) + item.num);
						} else {
							map.set(item.goods_id, item.num);
						}
					});

					// 遍历 goods_list 并更新 catNum
					this.goods_list.forEach(item => {
						// 将 id 转换为数字进行匹配
						const idAsNumber = Number(item.id);
						if (map.has(idAsNumber)) {
							item.catNum = map.get(idAsNumber);
						} else {
							item.catNum = 0; // 如果没有匹配的 goods_id，确保 catNum 为 0
						}
					});
				},
				deep: true
			}
		},

		methods: {
			// 点击添加购物车
			toAddcart(e) {
				console.log('点击了', e)
				uni.$emit("diyAddGood1", e);
			},
			// 跳转商品
			toGoods(id) {
				uni.navigateTo({
					url: "/goods/goods/goods?id=" + id,
				});
			},
			clear(id) {
				if (id === this.cat_id) return;
				this.goods_list = [];
				this.pageNo = 1;
				this.isEnd = false;
				this.cat_id = id;
				this.getGoodsList();
			},

			async getCatList() {
				const res = await this.$allrequest.mch_store.mchNextList({
					mch_id: this.mch_id,
				});
				if (!res.code) {
					console.log('我是分类', res)
					this.cat_list = res.data || [];

					if (this.cat_list && this.cat_list.length) {
						// !this.cat_id && this.cat_list[0].id;
						this.cat_id = this.cat_list[0].id
						this.getGoodsList();
					}
				}
			},

			async getGoodsList() {
				let {
					pageNo,
					cat_id,
					pageSize
				} = this;
				const res = await this.$allrequest.mch_store.goodList({
					mch_id: this.mch_id,
					cat_id,
					pageNo,
					pageSize,
				});
				uni.stopPullDownRefresh();
				this.moreStatus = 1;

				if (!res.code) {
					let {
						goods_list
					} = this, {
						list,
					} = res.data;

					if (list.length) {
						list = list.map(item => ({
							...item,
							catNum: 0
						}));
						goods_list.push(...list);
						this.pageNo = this.pageNo + 1;
					}

					if (goods_list.length >= parseInt(res.data.row_count, 10)) {
						this.isEnd = true;
						this.moreStatus = 3;
						console.log('走到了底部了')
					}
				}
			},

			scrolltolower() {
				if (this.isEnd) return;
				this.getGoodsList();
			},
		},
	};
</script>

<style lang="scss">
	.content {
		padding: 24rpx;

		.felx {
			display: flex;
			align-items: center;

			.right {
				margin-left: 24rpx;

				.name {
					font-weight: 600;
					font-size: 40rpx;
					color: #262626;
				}

				.status {
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-top: 10rpx;

					.ml20 {
						margin-left: 20rpx;
					}
				}
			}
		}

		.address {
			font-weight: 400;
			font-size: 24rpx;
			color: #8C8C8C;
			margin-top: 24rpx;
		}

	}

	.title {
		margin: -240rpx auto 0rpx;
	}

	.page {
		display: flex;
		height: 75vh;
		overflow: hidden;
	}

	.pageLeft {
		width: 168rpx;
		height: 100%;
		background: #f2f2f2;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 94rpx;
			text-align: center;
			font-size: 24rpx;
			color: #1d1d1d;

			&.active {
				color: #f0250e;
				font-weight: bold;
				background: #fff;

				.line {
					position: absolute;
					left: 0;
					top: 24rpx;
					bottom: 24rpx;
					width: 8rpx;
					background: #f0250e;
					border-radius: 0rpx 4rpx 4rpx 0rpx;
				}
			}
		}
	}

	.pageRight {
		flex: 1;
		overflow: hidden;
		height: 100%;
		background: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.scroll {
		height: 100%;
		overflow-y: auto;
	}

	.list {
		padding: 0 24rpx 24rpx;

		.item {
			position: relative;
			display: flex;
			padding: 24rpx 0;
			background: #fff;
			border-radius: 20rpx;

			&:after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				left: 192rpx;
				right: 0;
				height: 1px;
				background: #f2f2f2;
			}
		}

		.img {
			position: relative;
			margin-right: 20rpx;
			width: 172rpx;
			height: 172rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.flex {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.con {
			flex: 1;
			overflow: hidden;
			font-size: 24rpx;
			color: #8c8c8c;
		}

		.name {
			overflow: hidden;
			flex: 1;
			font-size: 30rpx;
			font-weight: bold;
			color: #262626;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.des {
			padding: 6rpx 0 6rpx;
			font-size: 24rpx;
		}

		.miao {
			width: 96rpx;
			height: 28rpx;
			background: #FFFFFF;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			border: 2rpx solid #FF5560;
			font-weight: 400;
			font-size: 20rpx;
			color: #F32B0A;
			line-height: 25rpx;
			text-align: center;
		}

		.conFd {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.let {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				padding-top: 10rpx;

				.flex {
					display: flex;
					align-items: center;
					justify-content: start;
				}

				.price {
					display: flex;
					align-items: flex-end;
					margin-right: 10rpx;
					color: #f0250e;
					font-size: 24rpx;

					&:before {
						content: "¥";
					}

					.s1 {
						font-size: 36rpx;
						line-height: 1.1;
						font-weight: bold;
					}
				}
			}

			.rig {
				padding: 6rpx 18rpx;
				border-radius: 32px;
				font-size: 24rpx;
				color: #fff;
				background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
			}
		}
	}

	.oldPrice {
		position: relative;

		&:after {
			content: "";
			position: absolute;
			left: 0;
			top: 50%;
			width: 100%;
			height: 1px;
			background: #888;
		}
	}

	.wd {
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
		margin-right: 10rpx;

		.iconBg {
			width: 42rpx;
			height: 42rpx;
			background: #F0250E;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.num {
				position: absolute;
				top: -8rpx;
				right: -8rpx;
				width: 24rpx;
				height: 24rpx;
				background: #F87F27;
				border-radius: 120rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 18rpx;
			}
		}
		.nextGo{
			background: #F0250E;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 122rpx;
			border-radius: 16rpx;
			height: 42rpx;
			color: #FFF;
			font-size: 22rpx;
		}
	}
</style>